<template>
  <div class="ds-navList-template">

  </div>
</template>
<script>
import g1 from "@/global/testTreeData";
import _ from "underscore";
var navData = [
  {
    title: "首页",
    own: "is-own",
    iconSrc: "static/images/fj-sider-icon_home.png",
    activeIconSrc: "static/images/fj-sider-icon_home1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    route: "/index",
    children: []
  },
  {
    title: "工作管理",
    own: "",
    iconSrc: "static/images/fj-sider-icon_gzgl.png",
    activeIconSrc: "static/images/fj-sider-icon_gzgl1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    children: [
      {
        title: "工作任务",
        route: "/work-manage-mission",
        children: [
          {
            title: "考勤历史",
            route: "/fjAttend-history",
            children: [
              {
                title: "考勤历史",
                route: "/fjAttend-history",
                children: [
                  {
                    title: "考勤历史",
                    route: "/fjAttend-history1",
                    children: [
                      {
                        title: "考勤历史",
                        route: "/fjAttend-history2",
                        children: [
                          {
                            title: "考勤历史",
                            route: "/fjAttend-history3"
                          },
                          {
                            title: "请假休假",
                            route: "/fjAttend-leave2"
                          },
                          {
                            title: "考勤申诉",
                            route: "/fjAttend-appeal"
                          },
                          {
                            title: "考勤配置",
                            route: "/fjAttend-configure"
                          },
                          {
                            title: "排班管理",
                            route: "/fjAttend-work-manage"
                          }
                        ]
                      },
                      {
                        title: "请假休假",
                        route: "/fjAttend-leave"
                      },
                      {
                        title: "考勤申诉",
                        route: "/fjAttend-appeal"
                      },
                      {
                        title: "考勤配置",
                        route: "/fjAttend-configure"
                      },
                      {
                        title: "排班管理",
                        route: "/fjAttend-work-manage"
                      }
                    ]
                  },
                  {
                    title: "请假休假",
                    route: "/fjAttend-leave"
                  },
                  {
                    title: "考勤申诉",
                    route: "/fjAttend-appeal"
                  },
                  {
                    title: "考勤配置",
                    route: "/fjAttend-configure"
                  },
                  {
                    title: "排班管理",
                    route: "/fjAttend-work-manage"
                  }
                ]
              },
              {
                title: "请假休假",
                route: "/fjAttend-leave"
              },
              {
                title: "考勤申诉",
                route: "/fjAttend-appeal"
              },
              {
                title: "考勤配置",
                route: "/fjAttend-configure"
              },
              {
                title: "排班管理",
                route: "/fjAttend-work-manage"
              }
            ]
          },
          {
            title: "请假休假",
            route: "/fjAttend-leave"
          },
          {
            title: "考勤申诉",
            route: "/fjAttend-appeal"
          },
          {
            title: "考勤配置",
            route: "/fjAttend-configure"
          },
          {
            title: "排班管理",
            route: "/fjAttend-work-manage",
            children: [
              {
                title: "考勤历史1",
                route: "/fjAttend-history"
              },
              {
                title: "请假休假1",
                route: "/fjAttend-leave"
              },
              {
                title: "考勤申诉1",
                route: "/fjAttend-appeal"
              },
              {
                title: "考勤配置1",
                route: "/fjAttend-configure"
              },
              {
                title: "排班管理1",
                route: "/fjAttend-work-manage"
              }
            ]
          }
        ]
      },
      {
        title: "信息采集",
        route: "/fjWorkManage-info",
        children: [
          {
            title: "请假休假",
            route: "/fjAttend-leave",
            children: [
              {
                title: "请假休假",
                route: "/fjAttend-leave"
              },
              {
                title: "考勤申诉",
                route: "/fjAttend-appeal"
              },
              {
                title: "考勤配置",
                route: "/fjAttend-configure"
              },
              {
                title: "排班管理",
                route: "/fjAttend-work-manage"
              }
            ]
          },
          {
            title: "考勤申诉",
            route: "/fjAttend-appeal"
          },
          {
            title: "考勤配置",
            route: "/fjAttend-configure"
          },
          {
            title: "排班管理",
            route: "/fjAttend-work-manage"
          }
        ]
      },
      {
        title: "工作日志",
        route: "/fjWorkManage-workLog"
      }
    ]
  },
  {
    title: "考勤管理",
    own: "",
    iconSrc: "static/images/fj-sider-icon_kqgl.png",
    activeIconSrc: "static/images/fj-sider-icon_kqgl1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    children: [
      {
        title: "考勤历史",
        route: "/fjAttend-history"
      },
      {
        title: "请假休假",
        route: "/fjAttend-leave"
      },
      {
        title: "考勤申诉",
        route: "/fjAttend-appeal"
      },
      {
        title: "考勤配置",
        route: "/fjAttend-configure"
      },
      {
        title: "排班管理",
        route: "/fjAttend-work-manage"
      }
    ]
  },
  {
    title: "考核管理",
    own: "",
    iconSrc: "static/images/fj-sider-icon_khgl.png",
    activeIconSrc: "static/images/fj-sider-icon_khgl1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    children: [
      {
        title: "单位考核",
        route: "/unit-assessment"
      },
      {
        title: "地区考核",
        route: "/local-assessment"
      },
      {
        title: "个人考核",
        route: "/personal-assessment"
      },
      {
        title: "考核规则",
        route: "/personal-assessment-rules"
      }
    ]
  },
  {
    title: "数据中心",
    own: "is-own",
    iconSrc: "static/images/fj-sider-icon_data.png",
    activeIconSrc: "static/images/fj-sider-icon_data1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    route: "/data-center",
    children: []
  },
  {
    title: "新闻中心",
    own: "",
    iconSrc: "static/images/fj-sider-icon_news.png",
    activeIconSrc: "static/images/fj-sider-icon_news1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    route: "",
    children: [
      {
        title: "信息报送",
        route: "/fjNewsCenter-infoSubmit"
      },
      {
        title: "文章管理",
        route: "/fjNewsCenter-articleManage"
      }
    ]
  },
  {
    title: "教培管理",
    own: "",
    iconSrc: "static/images/fj-sider-icon_jpgl.png",
    activeIconSrc: "static/images/fj-sider-icon_jpgl1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    children: [
      {
        title: "业务知识库",
        route: "/knowleage-center"
      },
      {
        title: "培训中心",
        route: "/training"
      },
      {
        title: "专题考试",
        route: "/special-exam"
      }
    ]
  },
  // {
  //   title: '人事管理',
  //   own: '',
  //   src: 'static/images/fj-sider-icon_jpgl.png',
  //   selectSrc: 'static/images/fj-sider-icon_jpgl1.png',
  //   arrowSrc: 'static/images/fj-sider-arrow.png',
  //   arrowSelectedSrc: 'static/images/fj-sider-arrow1.png',
  //   children: [{
  //     title: '招聘管理',
  //     route: '/personnel-recruit'
  //   }
  //   ]
  // },
  {
    title: "人事管理",
    own: "",
    iconSrc: "static/images/fj-sider-icon_hr.png",
    activeIconSrc: "static/images/fj-sider-icon_hr.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    children: [
      {
        title: "招聘管理",
        route: "/personnel-recruitment"
      },
      {
        title: "合同管理",
        route: "/personnel-contract"
      },
      {
        title: "档案管理",
        route: "/personnel-archives"
      },
      {
        title: "工资管理",
        route: "/personnel-wage"
      },
      {
        title: "规则管理",
        route: "/personnel-rule-setting"
      }
    ]
  },
  {
    title: "系统管理",
    own: "",
    iconSrc: "static/images/fj-sider-icon_sys.png",
    activeIconSrc: "static/images/fj-sider-icon_sys1.png",
    arrowSrc: "static/images/fj-sider-arrow.png",
    activeArrowSrc: "static/images/fj-sider-arrow1.png",
    children: [
      {
        title: "组织架构",
        route: "/organizational-structure"
      },
      {
        title: "考核配置",
        route: "/appraise-item"
      },
      {
        title: "操作日志",
        route: "/operation-logs"
      }
    ]
  }
];
//treeData
var navSettings = {
  initId: "0",
  pId: "parent_id",
  cId: "id"
};
function getTreeData(list, parentId) {
  var items = {};
  for (var i = 0; i < list.length; i++) {
    var listItem = list[i];
    var key = listItem[navSettings.pId];
    if (items[key]) {
      items[key].push(listItem);
    } else {
      items[key] = [];
      items[key].push(listItem);
    }
  }
  //console.log(items);
  return formatData(items, parentId);
  function formatData(data, id) {
    var result = [];
    if (!data[id]) {
      return result;
    }
    for (var i = 0; i < data[id].length; i++) {
      var t = data[id][i];
      t.children = formatData(data, t[navSettings.cId]);
      result.push(t);
    }
    return result;
  }
}
var navListData = getTreeData(g1.treeData, navSettings.initId);
//console.log(navListData);
//underscore -> settings
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};
//DsNav
function DsNav(opt) {
  if (!opt || _.isEmpty(opt)) {
    console.log("112233");
    return;
  }
  this.$vue = opt.$vue||{};
  this.treeData = opt.treeData || []; //导航栏数据
  this.settings = _.extend(
    {
      //参数
      itemName: "title",
      menuWrapClass: ".ds-navList-wrap", //菜单容器选择器
      menuParentClass:".ds-navList-template", //
      menuClass: ".ds-navList", //menu类名
      itemClass: ".ds-navList-item", //item类名
      hasIcon: false, //图标
      iconSrc: "iconSrc", //图标链接的字段名
      activeIconSrc: "activeIconSrc", //选中时的图标链接字段名
      iconClass: ".icon", //图标类名
      hasArrow: false, //箭头图标
      arrowSrc: "arrowSrc", //箭头链接的字段名
      activeArrowSrc: "activeArrowSrc", //选中时的箭头链接的字段名
      arrowClass: ".arrow", //箭头类名
      tabName: "route", //切换项对应的字段
      activeClass: ".is-active", //item选中时的类名
      toggleClass: "sider-toggle", //菜单折叠时的类名
      scrollClass: "ds-scroll" //菜单滚动条类名
    },
    opt.settings || {}
  );
  this.fns = {
    //事件
    itemClickAfter: $.isFunction(opt.itemClickAfter)
      ? opt.itemClickAfter
      : $.noop, //点击菜单项
    itemIconChange: $.isFunction(opt.itemIconChange)
      ? opt.itemIconChange
      : $.noop, //icon的src修改
    itemArrowChange: $.isFunction(opt.itemArrowChange)
      ? opt.itemArrowChange
      : $.noop //arrow的src修改
  };
  this.tempHtml = ""; //dom字符串
  this.navListWrap = null; //导航栏的最外层容器
  this.listWrap = null; //导航栏
  this.symbolReg = /\-/g; //检查-符号
  this.indexArrOfItem = null; //每个子项对应的index标记-数组
  this.openIndex = 1; //展开对应菜单时要添加active类名元素的初始下标
  this.clickedControl = false; //点击控制
}
DsNav.prototype = {
  constructor: DsNav,
  listWrap: '<div class="ds-navList"></div>',
  init: function() {
    if (!this.treeData.length) {
      console.warn("没有数据");
      return;
    }
    //_.template设置
    _.templateSettings = {
      interpolate: /\{\{(.+?)\}\}/g
    };
    //创建导航栏
    this.initMenu();
    return this;
  },
  refreshMenu: function(menuData) {
    //重新创建菜单
    if (!menuData || !_.isArray(menuData)) {
      alert("没有菜单数据");
      return;
    }
    if (this.listWrap && this.navListWrap) {
      this.clearItemsEvents();
      this.FLMenuItem = null;
      this.listWrap.parent().empty();
      this.listWrap = null;
      this.treeData = null;
      this.treeData = menuData;
      //
      this.initMenu();
    }
  },
  initMenu: function() {
    if (_.isArray(this.treeData) && this.treeData.length) {
      //过滤数据
      //var tmpTreeData = this.filterTreeData(this.treeData);
      //this.treeData = null;
      //this.treeData = tmpTreeData;
      //console.log(this.treeData);
      //创建菜单并绑定事件
      var navHtml = this.createMenu(this.treeData);
      //
      this.listWrap = $(navHtml);
      //
      this.constructor.prototype.menuClass = this.settings.menuClass;
      this.constructor.prototype.activeClassName = this.settings.activeClass.slice(
        1
      );
      //
      var NLW = $(this.settings.menuWrapClass, "body");
      this.navListWrap = NLW.length > 0 ? NLW : null;
      this.navListWrap.find(this.settings.menuParentClass).append(this.listWrap);
      //设置事件
      this.setItemsEvents();
    } else {
      alert("没有菜单数据");
    }
  },
  filterTreeData:function(data){  //过滤掉数据中hasRemoved=true的选项
    var self = this;
    data = $.grep(data,function(item){
      //console.log(item);
      if(item.children&&$.isArray(item.children)&&item.children.length){
        item.children = self.filterTreeData(item.children);
      }
      return !item.hasRemoved;
    });
    return data;
  },
  createMenu: function(data, key) {
    //创建导航栏
    if ((_.isArray(data) && !data.length) || !_.isArray(data)) {
      return "";
    }
    var key = key || "";
    var tempHtmlArr = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var keyIndex = key ? key + "-" + (i + 1) : i + 1 + "";
      dataItem.index = keyIndex; //数据项添加子级index标记
      tempHtmlArr.push(this.createMenuItem(dataItem, keyIndex));
    }
    return '<div class="ds-navList">' + tempHtmlArr.join("") + "</div>";
  },
  createMenuItem: function(data, key) {
    //创建导航栏子项
    var tempItemHtmlArr = [];
    var nl = key.search(this.symbolReg) != -1 ? "x" : "1"; //是否是第一级菜单
    var styleStr = data.hasRemoved?"display:none;":"";
    tempItemHtmlArr.push(
      _.template(
        '<div class="ds-navList-item" style="'+styleStr+'" data-level="' +
          nl +
          '" data-index="' +
          key +
          '" data-route="' +
          this.setItemRoute(data) +
          '">' +
          this.createIconTemp(data, nl) +
          '<span class="item-tag" title="{{data.' +
          this.settings.itemName +
          '}}">{{data.' +
          this.settings.itemName +
          "}}</span>" +
          this.createArrowTemp(data, nl) +
          "</div>" +
          this.createMenu(data.children, key),
        { variable: "data" }
      )(data)
    );
    return tempItemHtmlArr.join("");
  },
  setItemRoute(data) {
    //给子项标签设置data-route属性
    return data[this.settings.tabName] ? data[this.settings.tabName] : "";
  },
  createIconTemp: function(data, flag) {
    return this.settings.hasIcon && flag == 1
      ? '<img class="icon" src="' +
          data[this.settings.iconSrc] +
          '" data-noselect="' +
          data[this.settings.iconSrc] +
          '" data-select="' +
          data[this.settings.activeIconSrc] +
          '" alt="">'
      : "";
  },
  createArrowTemp: function(data, flag) {
    return this.settings.hasArrow && flag == 1
      ? '<img class="arrow" src="' +
          data[this.settings.arrowSrc] +
          '" data-noselect="' +
          data[this.settings.arrowSrc] +
          '" data-select="' +
          data[this.settings.activeArrowSrc] +
          '" alt="">'
      : "";
  },
  getIndexArr: function(item) {
    //获取子项对应的层级标记-数组
    var dataIndex = item.attr("data-index");
    return dataIndex.split(this.symbolReg);
  },
  getItemData: function(navDatas, arr) {
    //获取子项对应的数据
    //console.log(arr);
    var index = parseInt(arr.shift()) - 1;
    var tmpData = navDatas[index];
    return arr.length == 0 ? tmpData : this.getItemData(tmpData.children, arr);
  },
  getMenuItemNames:function(index){ //获取与index对应的各项名称
    var tmpArr = /\-/g.test(index)?index.split("-"):[index];
    var names = [];
    //
    getName.call(this,this.treeData,tmpArr);
    //
    function getName(data,arr){
      if(!arr.length||!data)return;
      var dataItem = data[arr.shift()*1 - 1];
      names.push(dataItem[this.settings.itemName]);
      getName.call(this,dataItem.children,arr);
    }
    return names;
  },
  navItemIsActive: function() {
    //是否有is-active类名
    return this.hasClass(DsNav.prototype.activeClassName);
  },
  navItemRemoveClass: function() {
    //删除类名
    this.removeClass(DsNav.prototype.activeClassName);
  },
  navItemAddClass: function() {
    //添加类名
    this.siblings()
      .removeClass(DsNav.prototype.activeClassName)
      .end()
      .addClass(DsNav.prototype.activeClassName);
  },
  navItemListHide: function() {
    //隐藏菜单
    return this.stop(true, true)
      .slideUp(200)
      .promise();
  },
  navItemListShow: function() {
    //显示菜单
    return this.stop(true, true)
      .slideDown(200)
      .promise();
  },
  isNavList: function() {
    //是否是菜单
    return this.is(DsNav.prototype.menuClass);
  },
  toggleItemMenu: function(navItem) {
    //展开子项的菜单
    var itemNavList = navItem.next(); //对应的菜单
    if (this.navItemIsActive.call(navItem)) {
      if (this.isNavList.call(itemNavList)) {
        this.navItemRemoveClass.call(navItem);
        //收起菜单
        this.navItemListHide.call(itemNavList);
      }
    } else {
      this.navItemAddClass.call(navItem);
      if (this.isNavList.call(itemNavList)) {
        //展开菜单
        this.navItemListShow.call(itemNavList).then(
          $.proxy(function() {
            var posInfo = navItem.get(0).getBoundingClientRect(),
              posInfo2 = navItem
                .parent()
                .get(0)
                .getBoundingClientRect(),
              indexInfo = this.getIndexArr(navItem);
            if (indexInfo.length >= 2) {
              itemNavList.css({
                top: posInfo.top - posInfo.height - posInfo2.top + "px"
              });
            }
          }, this)
        );
      }
    }
  },
  //收起菜单
  hideOhterNavItemLists: function(navItems) {
    //隐藏其它子项的菜单
    _.each(
      navItems,
      _.bind(function(e, i) {
        this.hideNavItemList($(e));
      }, this)
    );
  },
  hideNavItemList: function(navItem, noDeep) {
    //隐藏
    var oList = navItem.next();
    //清掉被选中的类名
    this.navItemRemoveClass.call(navItem);
    //是菜单的时候
    if (this.isNavList.call(oList)) {
      this.navItemListHide.call(oList);
      //隐藏子级下的菜单
      !noDeep &&
        this.hideOhterNavItemLists(oList.children(this.settings.itemClass));
    }
  },
  //获取第1级菜单元素
  getFLMenuItem: function() {
    if (!this.FLMenuItem) {
      this.FLMenuItem = this.listWrap.children(
        this.settings.itemClass + "[data-level=1]"
      );
    }
  },
  //收起不是当前active菜单项的所有其它菜单--点击菜单项
  toggleUpListByLevelX: function(item) {
    this.getFLMenuItem();
    var indexArr2 = this.getIndexArr(item);
    //收起同级的其它所有子项菜单
    this.hideOhterNavItemLists(item.siblings(this.settings.itemClass));
    this.hideOhterNavItemLists(
      this.FLMenuItem.not("[data-index=" + indexArr2[0] + "]")
    );
  },
  //收起不是当前active菜单项所有其它1级菜单--点击菜单项
  toggleUpListByLevel1: function(item) {
    item.siblings(this.settings.itemClass).each(
      $.proxy(function(i, e) {
        this.hideNavItemList($(e), true);
      }, this)
    );
  },
  //展开菜单
  openNavMenu: function(tabName) {
    //?
    if (/\?/.test(tabName)) {
      tabName = tabName.slice(0, tabName.indexOf("?"));
    }
    //根据tabName展开对应的菜单
    //第1级菜单元素
    this.getFLMenuItem();
    //找出对应的菜单数据
    var matchedData, index;
    index = this.getDataOfTabName(this.treeData, tabName);
    //console.log(index);
    //找到对应的数据
    if (_.isNumber(index)) {
      this.clearItemsEvents();
      //收起已展开的菜单
      this.hideOhterNavItemLists(this.FLMenuItem);
      //是不是已经展开的菜单  ???
      var openedItem = this.FLMenuItem.filter(this.settings.activeClass);
      if (openedItem.length) {
        var indexArr = this.getIndexArr(openedItem);
        var openedItemData = this.getItemData(this.treeData, indexArr);
        //已展开的子项-图标
        this.fns.itemIconChange.apply(this, [openedItem, openedItemData, true]);
        //已展开的子项-箭头
        this.fns.itemArrowChange.apply(this, [
          openedItem,
          openedItemData,
          true
        ]);
      }
      //是不是二级菜单之后的菜单
      if (this.navListWrap.hasClass(this.settings.toggleClass)) {
        this.navListWrap.removeClass(this.settings.scrollClass);
      } else {
        if (this.indexArrOfItem.length > 2) {
          this.navListWrap.removeClass(this.settings.scrollClass);
        } else {
          this.navListWrap.addClass(this.settings.scrollClass);
        }
      }
      //展开对应的子项
      this.openIndex = this.indexArrOfItem.length > 1 ? 1 : 0;
      //???
      this.openNavItemList(this.FLMenuItem.eq(index));
      _.delay($.proxy(this.setItemsEvents, this), 200);
      //console.log(this.indexArrOfItem);
      //console.log(this.treeData[index]);
    } else {
      //alert("导航路径不存在");
    }
  },
  getDataOfTabName: function(data, tabName) {
    //获取要展开项的对应数据
    var index;
    this.indexArrOfItem = null;
    for (var i = 0, len = data.length; i < len; i++) {
      var item = data[i];
      if (!_.isArray(item.children)) {
        alert("菜单数据的children项不是数组");
        break;
      }
      if (item[this.settings.tabName] == tabName && !item.children.length) {
        this.indexArrOfItem =
          item.index.search(this.symbolReg) != -1
            ? item.index.split("-")
            : [item.index];
        index = i;
        break;
      }
      if (item[this.settings.tabName] != tabName && item.children.length) {
        if (this.hasTabName(item.children, tabName)) {
          index = i;
          break;
        }
      }
    }
    return index !== undefined ? index : "";
  },
  hasTabName: function(data, tabName) {
    var dataIsArray = _.isArray(data);
    if (!dataIsArray) return false;
    var result = false;
    for (var i = 0, len = data.length; i < len; i++) {
      var item = data[i];
      if (item[this.settings.tabName] == tabName) {
        //matched
        console.log(item[this.settings.tabName]);
        this.indexArrOfItem =
          item.index.search(this.symbolReg) != -1
            ? item.index.split("-")
            : [item.index];
        result = true;
        break;
      } else {
        //console.log("tabName in children");
        result = this.hasTabName(item.children, tabName);
        if (result) {
          break;
        }
      }
    }
    return result;
  },
  openNavItemList: function(item) {
    //展开
    var openIndex = this.indexArrOfItem[this.openIndex] * 1;
    if (!this.indexArrOfItem || !openIndex) return;
    var level = item.attr("data-level");
    this.navItemAddClass.call(item);
    if (level == 1) {
      var indexArr = this.getIndexArr(item);
      var itemData = this.getItemData(this.treeData, indexArr);
      //已展开的子项-图标
      this.fns.itemIconChange.apply(this, [item, itemData, false]);
      //已展开的子项-箭头
      this.fns.itemArrowChange.apply(this, [item, itemData, false]);
    }
    var oList = item.next();
    if (this.isNavList.call(oList)) {
      this.navItemListShow.call(oList);
      //要添加avctive类名的
      var activeItem = oList
        .children(this.settings.itemClass)
        .eq(openIndex - 1);
      this.toggleItemMenu(activeItem);
      //有下级菜单显示
      this.openIndex++;
      //展开后面的子级菜单
      this.openNavItemList(activeItem);
    }
  },
  clearIconSrc: function(icon) {
    //icon图标恢复成默认的src
    icon.attr("src", icon.attr("data-noselect"));
  },
  clearArrowSrc: function(arrow) {
    //箭头图标恢复成默认的src
    arrow.attr("src", arrow.attr("data-noselect"));
  },
  navListWrapScroll: function(item) {
    //导航容器切换scroll类名
    var listItems;
    var indexArr2 = this.getIndexArr(item);
    if (this.navListWrap.hasClass(this.settings.toggleClass)) {
      if (indexArr2.length <= 1) {
        var nextIsList = this.isNavList.call(item.next()),
          isActive = this.navItemIsActive.call(item);
        nextIsList && isActive
          ? this.navListWrap.removeClass(this.settings.scrollClass)
          : this.navListWrap.addClass(this.settings.scrollClass);
      }
    } else {
      if (indexArr2.length <= 1) {
        listItems = this.getNextListChildren(item);
        this.navItemIsActive.call(listItems)
          ? this.navListWrap.removeClass(this.settings.scrollClass)
          : this.navListWrap.addClass(this.settings.scrollClass);
      } else {
        var nextIsList = this.isNavList.call(item.next());
        nextIsList && this.navListWrap.removeClass(this.settings.scrollClass);
      }
    }
  },
  getNextListChildren: function(navItem) {
    //获取菜单子元素
    return navItem.next().children(this.settings.itemClass);
  },
  getActiveNavItem: function(navItems, IA) {
    //获取菜单中有active类名的菜单项
    var activeNavItem;
    var index = IA.shift() * 1 - 1;
    activeNavItem = navItems.eq(index);
    if (!IA.length) {
      return activeNavItem;
    }
    var nextList = activeNavItem.next();
    if (IA.length && this.isNavList.call(nextList)) {
      return this.getActiveNavItem(
        nextList.children(this.settings.itemClass),
        IA
      );
    }
  },
  setWrapEleZindex: function() {
    //重新设置导航栏的层级
    if (this.navListWrap.attr("style")) return;
    var zArr = this.navListWrap
      .siblings()
      .addBack()
      .map(function(i, item) {
        return $(item).css("z-index");
      })
      .get();
    for (var i = 0, z; (z = zArr[i++]); ) {
      if (z == "auto") {
        z = 0;
      }
      z = z * 1;
    }
    var maxZ = Math.max.apply(null, zArr);
    this.navListWrap.css("z-index", maxZ + 1);
  },
  deleteWrapEleStyle: function() {
    //删除导航栏style
    this.navListWrap.removeAttr("style");
  },
  clearItemsEvents: function() {
    //解绑导航栏子项事件
    this.listWrap.off("click", this.settings.itemClass);
    this.navListWrap.siblings().off("click");
  },
  setItemsEvents: function() {
    //绑定导航栏事件
    this.listWrap.off("click").on(
      "click",
      this.settings.itemClass,
      _.bind(function(ev) {
        if (this.clickedControl) return false;
        this.clickedControl = true;
        //
        //console.time("test");
        //
        var _this = $(ev.currentTarget);
        var type = _this.attr("data-level");
        //获取子项对应的层级标记-数组
        var indexArr = this.getIndexArr(_this);
        //是否有子级菜单
        var isList = this.isNavList.call(_this.next());
        //是否有is-active类名
        var isActive = this.navItemIsActive.call(_this);
        //获取子项对应的数据
        var matchedData = this.getItemData(this.treeData, indexArr);
        //操作图标和箭头收起其它菜单
        if (type == 1) {
          this.fns.itemIconChange.apply(this, [_this, matchedData, isActive]);
          this.fns.itemArrowChange.apply(this, [_this, matchedData, isActive]);
          if ($.isArray(matchedData.children) && matchedData.children.length) {
            //第一级菜单-只收起同级的第一级菜单
            this.toggleUpListByLevel1(_this);
          } else {
            this.toggleUpListByLevelX(_this);
          }
        } else {
          this.toggleUpListByLevelX(_this);
        }
        //展开或收起对应菜单
        this.toggleItemMenu(_this);
        //导航容器切换scroll类名
        this.navListWrapScroll(_this);
        //重新设置导航栏的层级
        var ziia;
        if (this.navListWrap.hasClass(this.settings.toggleClass)) {
          ziia = this.getIndexArr(_this);
          if (ziia.length > 0 && isList) {
            this.setWrapEleZindex();
          }
          if (ziia.length == 1 && isList && !this.navItemIsActive.call(_this)) {
            this.deleteWrapEleStyle();
          }
        } else {
          ziia = this.getIndexArr(_this);
          if (ziia.length > 0 && isList) {
            this.setWrapEleZindex();
          }
          if (ziia.length == 2 && isList && !this.navItemIsActive.call(_this)) {
            this.deleteWrapEleStyle();
          }
        }
        //触发点击后的方法 ->
        if (!isList && !isActive) {
          this.deleteWrapEleStyle();
          this.fns.itemClickAfter.call(this,matchedData);
          var indexArr2 = this.getIndexArr(_this),
            FLItem = this.FLMenuItem.eq(indexArr2[0] * 1 - 1);
          if (this.navListWrap.hasClass(this.settings.toggleClass)) {
            if (indexArr2.length >= 2) {
              var IA = this.getIndexArr(FLItem);
              var matchedData = this.getItemData(this.treeData, IA);
              this.fns.itemIconChange.apply(this, [FLItem, matchedData, true]);
              this.fns.itemArrowChange.apply(this, [FLItem, matchedData, true]);
              //
              this.toggleItemMenu(FLItem);
            }
          } else {
            if (indexArr2.length >= 3) {
              var sActiveItem = this.getActiveNavItem(
                this.FLMenuItem,
                indexArr2.splice(0, 2)
              );
              this.toggleItemMenu(sActiveItem);
            }
          }
        }
        //clickedControl
        this.clickedControl = false;
        //
        //console.timeEnd("test");
      }, this)
    );
    //取消导航栏层级设置
    this.navListWrap
      .siblings()
      .off("click")
      .on(
        "click",
        $.proxy(function(ev) {
          ev.stopPropagation();
          if (this.FLMenuItem) {
            var FLactive = this.FLMenuItem.filter(this.settings.activeClass);
            if (!FLactive.length) return false;
            if (this.navListWrap.hasClass(this.settings.toggleClass)) {
              var indexArr = this.getIndexArr(FLactive);
              var matchedData = this.getItemData(this.treeData, indexArr);
              FLactive.removeClass(this.settings.activeClass.slice(1));
              this.fns.itemIconChange.apply(this, [
                FLactive,
                matchedData,
                true
              ]);
              this.fns.itemArrowChange.apply(this, [
                FLactive,
                matchedData,
                true
              ]);
            } else {
              var nac = this.getNextListChildren(FLactive).filter(
                this.settings.activeClass
              );
              if (nac.length && this.isNavList.call(nac.next())) {
                this.toggleItemMenu(nac);
              }
            }
          }
          this.deleteWrapEleStyle();
        }, this)
      );
  }
};
window.dsNav91026060 = DsNav;
export default {
  name: "nav-list",
  data() {
    return {
      navList: null
    };
  },
  mounted() {
    this.navList = $(this.$el);
    //
    window.dsNavList0505 = new dsNav91026060({
      treeData: navData, //导航栏数据
      itemClickAfter: function(data) {
        //对应导航栏子项的点击事件
        //console.log(data);
      },
      itemIconChange: function(item, data, isActive) {
        //icon
        var icon = item.children(this.settings.iconClass);
        var otherIcons = item
          .siblings(this.settings.itemClass)
          .children(this.settings.iconClass);
        for (var i = 0, len = otherIcons.length; i < len; i++) {
          this.clearIconSrc(otherIcons.eq(i));
        }
        !isActive
          ? icon.attr("src", data[this.settings.activeIconSrc])
          : icon.attr("src", data[this.settings.iconSrc]);
      },
      itemArrowChange: function(item, data, isActive) {
        //arrow
        var otherItems = item.siblings(this.settings.itemClass);
        var arrow = item.children(this.settings.arrowClass);
        var otherArrows = otherItems.children(this.settings.arrowClass);
        //
        otherItems.removeClass("is-noHC");
        for (var i = 0, len = otherArrows.length; i < len; i++) {
          this.clearArrowSrc(otherArrows.eq(i));
          otherArrows.eq(i).css("transform", "rotate(0deg)");
        }
        if (!data.children || !data.children.length) {
          !isActive
            ? arrow.attr("src", data[this.settings.activeArrowSrc])
            : arrow.attr("src", data[this.settings.arrowSrc]);
          !isActive ? item.addClass("is-noHC") : item.removeClass("is-noHC");
        } else {
          !isActive
            ? arrow.css("transform", "rotate(90deg)")
            : arrow.css("transform", "rotate(0deg)");
        }
      },
      settings: {
        hasIcon: true, //是否有icon图标
        iconSrc: "iconSrc", //图标链接在导航数据中的字段名
        activeIconSrc: "activeIconSrc", //选中时的图标链接字段名
        hasArrow: true, //是否有箭头
        arrowSrc: "arrowSrc", //箭头图标链接在导航数据中的字段名
        activeArrowSrc: "activeArrowSrc" //选中时的箭头链接字段名
      }
    });
    dsNavList0505.init();
  }
};
</script>
<style lang="less">
.ds-navList-wrap {
  &.ds-scroll {
    overflow-y: scroll;
  }
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.ds-navList {
  position: relative;
  width: inherit;
  transform-origin: 0 0;
}
.ds-navList-item {
  position: relative;
  cursor: pointer;
  user-select: none;
  & > .item-tag {
  }
  &[data-level="1"] + .ds-navList {
    /* background:#ccc; */
  }

  &[data-level="1"] + .ds-navList,
  &[data-level="x"] + .ds-navList {
    display: none;
    &.is-show {
      display: block;
    }
  }

  &[data-level="x"] + .ds-navList,
  &[data-index*="-"] + .ds-navList {
    position: absolute;
    top: 0px;
    left: 220px;
    width: 200px;
    border-radius: 8px;
  }
}
</style>